/*
 * @Description: 
 * @Author: 韩双双
 * @Date: 2021-04-21 14:03:33
 * @LastEditTime: 2021-04-27 14:33:03
 * @LastEditors: 韩双双
 */
import styles from './Homepage.less';
import { observer } from 'mobx-react-lite';
import react, { useEffect, useState } from 'react';
import usestore from '@/context/useStore';
import ArticleList from '@/component/Articel/articleList';
import Articleall from '@/component/Articel/Articleall';

import ArticlesTag from '@/component/Articel/articles';
import Category from '@/component/Articel/category';
import Loding from '@/component/Articel/loding';
import Icon from '@/component/Articel/icon';


import { Affix } from 'antd';

function Page() {
  let { article } = usestore()
  const [top, setTop] = useState(10);
  const [bottom, setBottom] = useState(10);

  useEffect(() => {
    article.getArticleallrecommend()
  }, [])
  // useEffect(() => {
  //   article.getAllrecommend()
  // }, [])
  return (
    <div className={styles.box}>
      <div className={styles.left}>
        <div>
          <Articleall></Articleall>
        </div>
        <ArticleList></ArticleList>
      </div>
      <div className={styles.right}>
        <Affix offsetBottom={bottom}>
          <Loding></Loding>
        </Affix>
        <br />

        <Affix offsetTop={top}>
          <div>
            <Category></Category>
            <ArticlesTag></ArticlesTag>
            <Icon></Icon>
          </div>
        </Affix>
      </div>

    </div>
  );
}

export default observer(Page)